<template>
	<view>
		<view class="choose-address">
			<template v-if="address.id">
				<view class="u-flex" @click="chooseAddress">
					<view class="title u-flex-1">{{`${address.province} ${address.city} ${address.county} ${address.address}`}}</view>
					<u-icon name="arrow-right" color="#666"></u-icon>
				</view>
				<view class="info" @click="chooseAddress">{{address.realname}} {{address.phone}}</view>
			</template>
			<template v-else>
				<view class="u-flex" @click="addAddress">
					<view class="title u-flex-1">您还没有收货地址 点击添加</view>
					<u-icon name="arrow-right" color="#666"></u-icon>
				</view>
			</template>
		</view>
		<view class="content" v-if="info">
			<view class="info u-flex">
				<image :src="info.cover"></image>
				<view class="u-flex-1">
					<view class="title u-line-2">{{info.goodsName}}</view>
					<view class="sku"></view>
					<view class="price">{{info.price}} i币</view>
				</view>
			</view>
			<view class="count-ib u-flex">
				<image src="/static/icon2/ib.png"></image>
				<text>{{info.price}}</text>
			</view>
		</view>
		
		<view class="submit safe-area-inset-bottom u-flex">
			<view class="num1 u-flex-1">
				<text class="t1">合计：</text><text class="t2">{{info.price}} i币</text>
			</view>
			<view class="num2" @click="submit">确定提交</view>
		</view>
		
		<u-mask :show="show" @click="show = false">
			<rechargeib v-if="show" :info="info" @pay="show = !1"></rechargeib>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked:!0,
				show:!1,
				address:{},
				info:'',
				goods_id:''
			}
		},
		methods: {
			getAddress(){
				this.$u.api.address().then(res=>{
					if(res.length)
					this.address = res[0]
				})
			},
			chooseAddress(){
				uni.$once('addressChooseItem',(item)=>{
					this.address = item
				})
				this.$app.jump('/pages/address/list?type=choose')
			},
			addAddress(){
				uni.$once('addressChooseAdded',()=>{
					this.getAddress()
				})
				this.$app.jump('/pages/address/edit?type=choose')
			},
			getGoodsInfo(){
				this.$u.api.goodsDetail({goods_id:this.goods_id}).then(res=>{
					this.info = res
				})
			},
			submit(){
				// 提交订单前验证i币是否够
				const price = Number(this.info.price)
				const icoin = Number(this.vuex_user.icoin)
				if(price > icoin){
					// 余额不足
					this.show = !0
					return
				}
				const address_id = this.address.id
				if(!address_id){
					this.$u.toast('请选择收货地址')
					return
				}
				const goods_id = this.goods_id
				uni.showModal({
					content:'是否购买？',
					success: (res) => {
						res.confirm && this.$u.api.goodsBuy({address_id,goods_id}).then(res=>{
							this.$u.toast('购买成功')
							this.$store.dispatch('userInfo',this)
							setTimeout(()=>{
								this.$app.jump('/pages/mine/mine',!0)
							},600)
						})
					}
				})
			}
		},
		onLoad(o) {
			this.goods_id = o.id
			this.getAddress()
			this.getGoodsInfo()
			// 更新用户信息
			this.$store.dispatch('userInfo',this)
		}
	}
</script>

<style>
	page{background-color: #F1F1F1;}
</style>
<style lang="scss" scoped>
	.choose-address{
		background-color: #fff;border-radius: 20rpx;padding: 20rpx;margin: 20rpx 60rpx 0;
		.title{font-size: 32rpx;font-weight: bold;padding: 10rpx 0;}
		.info{color: #555;}
	}
	.content{background-color: #fff;border-radius: 20rpx;padding: 20rpx;margin: 20rpx 60rpx 0;
		.info{
			padding-bottom: 30rpx;border-bottom: 1rpx solid #eee;
			image{width: 160rpx;height: 160rpx;border-radius: 20rpx;display: block;flex-shrink: 0;margin-right: 22rpx;}
			.title{font-weight: bold;font-size: 29rpx;line-height: 40rpx;height: 80rpx;}
			.sku{font-size: 26rpx;color: #555;padding-bottom: 10rpx;}
			.price{color: #F55332;font-size: 24rpx;font-weight: bold;}
		}
		.count-ib{padding-top: 15rpx;justify-content: flex-end;
			image{width: 36rpx;height: 36rpx;display: block;}
			text{font-weight: bold;font-size: 30rpx;color: #F55332;padding-left: 10rpx;}
		}
		.u-title{font-size: 30rpx;font-weight: bold;}
		.pay-type{
			height: 70rpx;white-space: nowrap;padding-top: 20rpx;
			image{width: 36rpx;height: 36rpx;display: block;flex-shrink: 0;}
			.num2{margin-right: auto;margin-left: 15rpx;}
			.num3{margin-right: 20rpx;}
			/deep/ .u-checkbox__label{display: none;}
		}
	}
	.submit{position: fixed;left: 50%;transform: translateX(-50%);width: 630rpx;height: 80rpx;bottom: 50rpx;
		z-index: 99;box-sizing: content-box;
		.num1{background-color: #fff;border-radius: 100rpx 0 0 100rpx;height: 80rpx;line-height: 80rpx;
			.t1{color: #666;padding-left: 30rpx;}
			.t2{color: #F55332FF;font-size: 34rpx;padding-left: 10rpx;font-weight: bold;}
		}
		.num2{border-radius: 0 100rpx 100rpx 0;background: linear-gradient(90deg, #FAE273 0%, #F4D039 100%);width: 180rpx;height: 80rpx;text-align: center;line-height: 80rpx;font-weight: bold;font-size: 32rpx;color: #fff;}
	}
</style>
